import * as React from 'react';
import { forwardRef } from 'react';
import './index.scss';


// 确保createElement可用
const { createElement } = React;

export interface TableListProps {
  /**
   * 左侧中文文字
   */
  chineseText?: string;

  /**
   * 中间英文文字
   */
  englishText?: string;

  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;

  /**
   * 主题样式
   */
  theme?: 'light' | 'dark';

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;
  iconUrl?: string; // 新增：可选icon图片地址

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const TableList = forwardRef<HTMLDivElement, TableListProps>((props, ref) => {
  const {
    headerTextColor = '#56A5FF',
    recordTextColor = 'rgba(255,255,255,0.9)',
    tableHeaders = [
      { key: 'title', value: '事件名称', width: '25' },
      { key: 'month', value: '时间', width: '15' },
      { key: 'type', value: '当前状态', width: '15' },
      { key: 'address', value: '位置', width: '32' },
      { key: 'expiring', value: '等级', width: '13' },
    ],
    records = [
      { id: '1', title: '事件名称', month: '07-01', address: '华阳老街是这里呀', type: '问题分类',  expiring: '一级'},
      { id: '2', title: '事件名称', month: '07-02', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '3', title: '事件名称', month: '07-03', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '4', title: '事件名称', month: '07-04', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '5', title: '事件名称', month: '07-05', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '6', title: '事件名称', month: '07-06', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '7', title: '事件名称', month: '07-07', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '8', title: '事件名称', month: '07-08', address: '地址', type: '问题分类', expiring: '一级' },
    ],
    tableHeight = 120,
    onClick,
    style = {},
    className = '',
    iconUrl,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const classNames = [
    'hzdz-tbale-list',
    className
  ].filter(Boolean).join(' ');


  return (
    <div
      ref={ref}
      className={classNames}
      style={{height: `${tableHeight}px`, marginTop: '15px'}}
      {...otherProps}
    >
      {/* 表头 */}
      <div className="table-header" style={{backgroundImage:`url(static/images/qixiangfangzhai/bz54.png)`}}>
        {tableHeaders.map((head,value) => (
          <div
            className="header-cell"
            style={{ color: headerTextColor, width: `${head.width}%` }}
          >
            {head.value}
          </div>
        ))}
      </div>
      {/* 表格数据 */}
      <div className="table-body"  style={{height: 'calc(100% - 40px)'}}>
        {records.map((record, index) => (
          <div
            key={record.id}
            className="table-row"
          >
            {tableHeaders.map((head) => (
              <div
                className="table-cell"
                style={{ color: recordTextColor, width: `${head.width}%` }}
              >
                {record[head.key]}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
});

TableList.displayName = 'TableList';

export default TableList;
